<template>
  <div class="homepage-hero-module">
    <div class="video-container">
     <!-- <div :style="fixStyle" class="filter"><el-button type="primary">上班打卡</el-button>
	  <el-button type="danger">下班打卡</el-button>
	  </div> -->
	  <div><el-button type="primary" @click="up">上班打卡</el-button>
	  <el-button type="danger" @click="down">下班打卡</el-button>
	  </div>
  <!--   <video :style="fixStyle" autoplay loop class="fillWidth" muted='muted' v-on:canplay="canplay">

        <source src="../001.mp4" type="video/mp4"/>
      
        <source src="../001.mp4" type="video/webm"/>
       
      </video> -->
      <div class="poster hidden" v-if="!vedioCanPlay">
        <h1>loading......................</h1>
      </div>
    </div>
	//我们要加上去的组件
		<div class="box"> 
			<el-button type="danger">weqre</el-button>
		</div>
  </div>
</template>
<style lang="less" scoped>
  .homepage-hero-module,
  .video-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }

  .video-container .poster img,
  .video-container video {
    z-index: 0;
    position: absolute;
  }

  .video-container .filter {
    z-index: 1;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
  }
  //css
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  .box{
  	position: absolute;
  	z-index: 100;
      width: 100%;
      height: 100%;
      
  	}
</style>




	<script>
	  export default {
	    name: 'login',
	    data() {
	      return {
	        vedioCanPlay: false,
	        fixStyle: '',
			show:false
	      }
	    },
	    methods: {
	      canplay() {
	        this.vedioCanPlay = true
	      },
		  up(){
			  this.$message.success("上班打卡成功"+this.gettime());
		  },
		  gettime(){
			  var nowDate = new Date();
			       let date = {
			         year: nowDate.getFullYear(),
			         month: nowDate.getMonth() + 1,
			  					  day:nowDate.getDay(),
			  					  h:nowDate.getHours(),
			  					  s:nowDate.getMinutes(),
			  					  ss:nowDate.getSeconds()
			       };
			       let systemDate = date.year + "年" + date.month + "月"+date.h+"时"+date.s+"分"+date.ss+"秒";
				   return systemDate
		  },
		  down(){
			  
			       
			  this.$message.success("下班打卡成功"+this.gettime())
		  }
	    },
	    mounted: function() {
	      window.onresize = () => {
	        const windowWidth = document.body.clientWidth
	        const windowHeight = document.body.clientHeight
	        const windowAspectRatio = windowHeight / windowWidth
	        let videoWidth
	        let videoHeight
	        if (windowAspectRatio < 0.5625) {
	          videoWidth = windowWidth
	          videoHeight = videoWidth * 0.5625
	          this.fixStyle = {
	            height: windowWidth * 0.5625 + 'px',
	            width: windowWidth + 'px',
	            'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
	            'margin-left': 'initial'
	          }
	        } else {
	          videoHeight = windowHeight
	          videoWidth = videoHeight / 0.5625
	          this.fixStyle = {
	            height: windowHeight + 'px',
	            width: windowHeight / 0.5625 + 'px',
	            'margin-left': (windowWidth - videoWidth) / 2 + 'px',
	            'margin-bottom': 'initial'
	          }
	        }
	      }
	      window.onresize()
	    }
	  }
	</script>

	
